<template>
	<div>
		<div class="oper-form" :class="operateType == 'check' ? 'disabled' : ''">
			<a-form-model
				ref="form"
				:model="form"
				:rules="rules"
				:label-col="labelCol"
				:wrapper-col="wrapperCol"
			>
				<a-form-model-item label="分群名称" prop="crowdName">
					<a-input v-model="form.crowdName" placeholder="请输入内容" />
				</a-form-model-item>
				<div :class="operateType == 'edit' ? 'disabled' : ''">
					<a-form-model-item label="关联ID">
						<a-select v-model="form.joinField" placeholder="请选择" @select="idChange">
							<a-select-option value="account_id" label="账户id">账户id</a-select-option>
							<a-select-option value="distinct_id" label="账户id">设备id</a-select-option>
						</a-select>
					</a-form-model-item>
					<a-form-model-item label="上传">
						<a-upload
							name="file"
							:multiple="false"
							accept=".txt"
							:headers="headers"
							:before-upload="beforeUpload"
							:remove="removeFile"
						>
							<a-button>
								<a-icon type="upload" />
								上传文件
							</a-button>
						</a-upload>
						<span class="load-text" @click="loadTemplate">下载模板</span>
					</a-form-model-item>
				</div>

				<div class="footer-btn" v-if="operateType !== 'check'">
					<a-spin :spinning="loading">
						<a-button class="cancel-btn" @click="closeSelf">取消</a-button>
						<a-button type="primary" @click="onSubmit">保存</a-button>
					</a-spin>
				</div>
			</a-form-model>
		</div>
	</div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import { uploadId, downloadIdTemplate, getUserCrowdInfo, userCrowdSave } from '@/api/userGroup'
import { nameLength } from '../model'
@Component({
	name: 'UploadID',
	components: {}
})
export default class UploadID extends Vue {
	@Prop() operateType!: string
	@Prop() userCrowdId!: string
	labelCol = { span: 4 }
	wrapperCol = { span: 14 }
	headers = {
		authorization: 'authorization-text'
	}
	file: any
	filePath = ''
	editSaveParmas: any = {}
	public form = {
		crowdName: '',
		joinField: 'account_id'
	}
	rules = {
		crowdName: [
			{ required: true, message: '请输入分群名称', trigger: 'blur' },
			{ validator: nameLength, trigger: 'blur' }
		]
	}
	loading = false
	created() {
		if (this.operateType !== 'create') {
			this.getInfo(this.userCrowdId)
		}
	}
	closeSelf() {
		this.$emit('close')
	}
	idChange() {
		console.log()
	}
	beforeUpload(file: File) {
		const { type } = file
		if (type !== 'text/plain') {
			this.$notify.warning({
				message: '请上传txt格式的模板文件'
			})
			return false
		}
		this.file = file
		return false
	}
	removeFile() {
		this.file = null
	}
	loadTemplate() {
		downloadIdTemplate().then((res: any) => {
			let text = res
			let a = document.createElement('a')
			a.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)
			a.download = 'id模板'
			document.body.appendChild(a)
			a.click()
			document.body.removeChild(a)
		})
	}
	loadFile() {
		let a = document.createElement('a')
		a.href = this.filePath
		a.download = ''
		document.body.appendChild(a)
		a.click()
		document.body.removeChild(a)
	}
	onSubmit() {
		const projectId = localStorage.getItem('productId') || '102'
		let formData = new FormData()
		formData.append('uploadFile', this.file)
		formData.append('projectId', projectId)
		formData.append('crowdName', this.form.crowdName)
		formData.append('joinField', this.form.joinField)
		const formRef: any = this.$refs['form']
		formRef.validate((valid: any) => {
			if (valid) {
				this.loading = true
				if (this.operateType === 'create') {
					uploadId(formData)
						.then(res => {
							const { code, message } = res
							if (code === 200) {
								this.$notify.success({
									message: '保存成功!'
								})
								this.closeSelf()
								this.$emit('handleRefresh')
							} else {
								this.$notify.warning({
									message
								})
							}
						})
						.finally(() => {
							this.loading = false
						})
				}
				if (this.operateType === 'edit') {
					this.editSaveParmas.crowdName = this.form.crowdName
					userCrowdSave(this.editSaveParmas)
						.then((res: any) => {
							const { code, message } = res
							if (code == 200) {
								this.$notify.success({
									message: `保存成功！`
								})
								this.closeSelf()
								this.$emit('handleRefresh')
							} else {
								this.$notify.warning({
									message: message
								})
							}
						})
						.finally(() => {
							this.loading = false
						})
				}
			}
		})
	}
	async getInfo(id: string | number) {
		await getUserCrowdInfo(id).then(res => {
			const {
				data: { crowdName, crowdRules }
			} = res
			this.form.crowdName = crowdName
			this.form.joinField = crowdRules.field
			this.filePath = crowdRules.filePath
			this.editSaveParmas = {
				id: res.data.id,
				projectId: res.data.projectId,
				crowdName: '',
				showName: res.data.showName
			}
		})
	}
}
</script>

<style lang="scss" scoped>
.disabled {
	pointer-events: none;
	opacity: 0.6;
}
.oper-form {
	height: 100%;
	.a-form-model {
		height: 100%;
	}
	.load-text {
		display: inline-block;
		margin-left: 140px;
		color: $blue;
		text-decoration: underline;
		position: absolute;
		top: 0;
		white-space: nowrap;
		line-height: normal;
		cursor: pointer;
	}
}
.step-load {
	margin-left: 100px;
	cursor: pointer;
	.anticon-file-sync {
		color: $blue;
		font-size: 36px;
	}
	.load-text {
		display: inline-block;
		margin-left: 4px;
		color: $blue;
		text-decoration: underline;
		line-height: 36px;
	}
}
.footer-btn {
	padding-top: 30px;
	display: flex;
	justify-content: flex-end;
	.cancel-btn {
		margin-right: 8px;
	}
}
</style>
